<template>
  <el-cascader
    clearable
    :options="options"
    :props="{ checkStrictly: true }"
    placeholder="管理机构"
    v-model="list"
    @change="slectData"
    ref="deptIdCascader"
  ></el-cascader>
</template>

<script>
import { treeSelect } from "@/api/communityOperating/drainageLink";
export default {
  name: "MechanismCascader",
  props: {
    deptId: {
      type: Number,
      default: null,
    },
    // query: Object,
  },
  watch: {
    list() {
      if (this.$refs.deptIdCascader) {
        this.$refs.deptIdCascader.dropDownVisible = false
      }
    },
    deptId(newValue){
      if(!newValue){
        this.list = []
      }
    }
  },
  data() {
    return {
      options: [],
      list: [],
    };
  },

  mounted() {
    this.treeSelect();
  },
  methods: {
    treeSelect() {
      treeSelect().then((res) => {
        if (res.code === 200) {
          this.options = res.data;
        }
      });
    },
    slectData(e) {
      this.list = e;
      let len = e.length;
      if (e.length) {
        len = len - 1;
      }
      this.$emit("update:deptId", e[len]);
    },
  },
};
</script>

<style lang="scss" scoped></style>
